<template>
	<view class="content">
		<image src="@/static/tmbj.png" mode="heightFix" style="width: 750rpx;height: 400rpx;" class="bg"></image>
		<!-- 个人信息 -->
		<view class="bag">
			<view class="bag_info flex justify-between items-center">
				<view class="left flex items-center">
					<view class="left_o">
						<image :src="info.avatar||mrtx" mode="widthFix" style="width: 96rpx;"></image>
					</view>
					<view class="left_t">
						<view class="t_o">
							{{info.name||'同路仁接单员'}}
						</view>
						<view class="flex items-center" style="margin-top: 8rpx;">
							<u-rate activeColor='#FF6401' :count="count" readonly v-model="info.star"></u-rate>{{info.star||0}}分
						</view>
					</view>
				</view>
				<view class="right" @click="$msg.Navigoto('/pages_t/Settings/Settings')">
					<image src="@/static/sz.png" mode="widthFix" style="width: 48rpx;"></image>
				</view>
			</view>
			<!-- 金额 -->
			<view class="bag_money flex justify-around">
				<view class="m_o a flex-col justify-center items-center">
					<view class="o_e">
						{{info.my_commission||0.00}}
					</view>
					<view class="o_w">
						我的佣金(元)
					</view>
				</view>
				<view class="m_t a flex-col justify-center items-center">
					<view class="o_e">
						{{info.withdrawable||0.00}}
					</view>
					<view class="o_w">
						可提现(元)
					</view>
				</view>
				<view class="m_h a flex-col justify-center items-center">
					<view class="o_e">
						{{info.withdrawn||0.00}}
					</view>
					<view class="o_w">
						已提现(元)
					</view>
				</view>
			</view>
			<!-- 统计 -->
			<view class="bag_Statistics">
				<view class="S_title flex justify-between">
					<view class="t_left">
						数据统计
					</view>
					<view class="t_right flex-center" @click="$msg.Navigoto('/pages_t/allinfo/allinfo')">
						<view class="all">
							查看全部
						</view>
						<image src="@/static/right.png" mode="widthFix" style="width: 32rpx;margin-left: 10rpx;">
						</image>
					</view>
				</view>
				<view class="S_con flex-col justify-around">
					<view class="bag_money2 flex justify-between">
						<view class="m_o a flex-col justify-center items-center f2">
							<view class="o_e">
								{{info.today_money||0.00}}
							</view>
							<view class="o_w">
								今日收益(元)
							</view>
						</view>
						<view class="m_t a flex-col justify-center items-center f2">
							<view class="o_e">
								{{info.today_count||0}}
							</view>
							<view class="o_w">
								今日接单(笔)
							</view>
						</view>
						<view class="m_h a flex-col justify-center items-center f2">
							<view class="o_e">
								{{info.to_be_credited||0.00}}
							</view>
							<view class="o_w">
								待入账(元)
							</view>
						</view>
					</view>
					<view class="bag_money2 flex justify-between">
						<view class="m_o a flex-col justify-center items-center f2">
							<view class="o_e">
								{{info.today_k_money||0.00}}
							</view>
							<view class="o_w">
								今日扣款(元)
							</view>
						</view>
						<view class="m_t a flex-col justify-center items-center f2">
							<view class="o_e">
								{{info.today_k_count||0}}
							</view>
							<view class="o_w">
								今日扣款订单(笔)
							</view>
						</view>
						<view class="m_h a flex-col justify-center items-center f2">
							<view class="o_e">
								{{info.to_be_deducted||0}}
							</view>
							<view class="o_w">
								待扣款订单(笔)
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 统计 -->
			<view class="bag_Statistics">
				<view class="S_title flex justify-between">
					<view class="t_left">
						常用功能
					</view>
					<!-- <view class="t_right flex-center">
						<view class="all">
							查看全部
						</view>
						<image src="@/static/right.png" mode="widthFix" style="width: 32rpx;margin-left: 10rpx;"></image>
					</view> -->
				</view>
				<navigator url="../my/purse" class="S_con2 items-center flex justify-between">
					<view class="Sc_left flex-center">
						<image src="@/static/qb.png" mode="widthFix" style="width: 64rpx;"></image>
						<view class="" style="margin-left: 15rpx;">
							我的钱包
						</view>
					</view>
					<view class="Sc_left">
						<image src="@/static/right.png" mode="widthFix" style="width: 32rpx;margin-left: 10rpx;">
						</image>
					</view>
				</navigator>
				<navigator url="../my/evaluate" class="S_con2 items-center flex justify-between">
					<view class="Sc_left flex-center">
						<image src="@/static/eva.png" mode="widthFix" style="width: 64rpx;"></image>
						<view class="" style="margin-left: 15rpx;">
							我的评价
						</view>
					</view>
					<view class="Sc_left">
						<image src="@/static/right.png" mode="widthFix" style="width: 32rpx;margin-left: 10rpx;">
						</image>
					</view>
				</navigator>
			</view>
			<image src="@/static/logo.png" mode="widthFix" style="position: absolute;margin: 40rpx 0; width: 690rpx;">
			</image>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				value: 2.5,
				info:'',
				mrtx:'/static/Rectangle.png'
			};
		},
		onShow() {
			this.rider_index()
		},
		methods: {
			rider_index() {
				this.$api.rider_index({
					
				}).then(res => {
					this.info=res.data
					console.log(this.info, 'res');
				}).catch(err => {
					console.log(err, 'err');
				});
			}

		}
	}
</script>

<style lang="scss">
	.content {
		.bg {
			position: absolute;
			top: 0;
			z-index: -1;
		}

		.bag {
			margin: 200rpx 32rpx 0 32rpx;

			.bag_info {
				.left {
					.left_t {
						margin-left: 10rpx;

						.t_o {
							font-weight: bold;
							font-size: 32rpx;
							color: #00091A;
						}
					}
				}
			}

			.bag_money {
				margin-top: 80rpx;

				.a {
					.o_e {
						margin: 10rpx 0;
						font-weight: bold;
						font-size: 32rpx;
						color: #00091A;
					}

					.o_w {
						margin: 10rpx 0;
						font-size: 24rpx;
						color: #999CA3;
					}
				}
			}

			.bag_Statistics {
				margin-top: 80rpx;

				.S_title {
					.t_left {
						font-weight: bold;
						display: flex;
						font-size: 32rpx;
						color: #00091A;
						align-items: center;

						&::before {
							content: '';
							display: inline-block;
							width: 7rpx;
							height: 32rpx;
							background: #3377FF;
							border-radius: 0rpx 0rpx 0rpx 0rpx;
							margin-right: 10px; // 设置竖杠与文本之间的间距
						}
					}

					.t_right {
						.all {
							font-size: 28rpx;
							color: #999CA3;
						}
					}
				}

				.S_con2 {
					padding: 0 32rpx;
					margin-top: 30rpx;
					height: 112rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
					border-radius: 24rpx 24rpx 24rpx 24rpx;
				}

				.S_con {
					margin-top: 30rpx;
					width: 686rpx;
					height: 296rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
					border-radius: 24rpx 24rpx 24rpx 24rpx;

					.bag_money2 {
						// margin-top: 80rpx;

						.a {
							.o_e {
								margin: 10rpx 0;
								font-weight: bold;
								font-size: 32rpx;
								color: #00091A;
							}

							.o_w {
								margin: 10rpx 0;
								font-size: 24rpx;
								color: #999CA3;
							}
						}
					}
				}
			}
		}
	}
</style>